<template>
  <g-table-page
    :store-model-name="storeModelName"
    add-btn-link="/admin/questionnaire/add"
    add-btn-link-text="添加调研计划"
    :selection="false"
    :table-operation="tableOperation"
    :show-dropdown-groups="true"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
    <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
      <div v-if="row">
        <span v-if="item.prop == 'qnStartDate|qnEndDate'">
          {{ dayjs(row['qnStartDate']).format('YYYY-MM-DD') }} 至
          {{ dayjs(row['qnEndDate']).format('YYYY-MM-DD') }}
        </span>
        <span v-if="item.prop == 'dataStime|dataEtime'">
          {{ dayjs(row['dataStime']).format('YYYY-MM-DD') }} 至
          {{ dayjs(row['dataEtime']).format('YYYY-MM-DD') }}
        </span>
      </div>
    </template>
  </g-table-page>
</template>

<script setup lang="ts">
import { computed, toRefs, ref } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { updateBackMenuApi } from '@/api/system'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import dayjs from 'dayjs'
import { updateQuestionnaireApi } from '@/api/admin'

const storeModelName = 'questionnaireModule'
const tableOperation = {
    width: 120,
    fixed: 'right',
    buttonGroups: [
        ({ row }) => {
            return {
                name: '编辑',
                isShow: true,
                click: ({ row }) => {
                    router.push({
                        path: '/admin/questionnaire/edit',
                        query: { id: row.menuId }
                    })
                }
            }
        },
        ({ row }) => {
            return {
                name: '删除',
                type: 'danger',
                isShow: true,
                click: ({ row }) => {
                    updateQuestionnaireApi({ qnId: row.qnId, qnDisplayStatus: 0 }).then((res) => {
                        if (res * 1 === 200) {
                            ElMessage.success('删除成功')
                            setTimeout(() => {
                                router.go(0)
                            }, 100)
                        }
                    })
                }
            }
        }
    ]
}

const tableHeadListSlotName = computed(() => {
    const tableHeadList = store.state[storeModelName].tableHeadList
    return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
</script>
